<template>
  <d2-crud-x
    ref="d2Crud"
    style="padding: 20px"
    :columns="crud.columns"
    :data="crud.list"
    :rowHandle="rowHandle"
    @row-edit="handleRowEdit"
    add-title="新增"
    :options="crud.options"
    :add-template="crud.addTemplate"
    :edit-template="crud.editTemplate"
    :view-template="crud.viewTemplate"
    :form-options="formOptions"
    @row-add="handleRowAdd"
    @row-remove="handleRowRemove"
    @dialog-cancel="handleDialogCancel">
    <div slot="header">
      <el-button size="mini" type="primary" @click="addRow">新增</el-button>

    </div>
  </d2-crud-x>
</template>

<script>

import { d2CrudPlus } from 'd2-crud-plus'
import { crudOptions } from './crud'

export default {
  data () {
    return {
      rowHandle: {
        width: 300,
        align: 'center',
        remove: {
          order: 1,
          icon: 'el-icon-delete',
          size: 'mini',
          confirm: true,
        },
        edit: {
          order: 2,
          icon: 'el-icon-edit',
          size: 'mini',
          confirm: true,
        },
        view: {
          order: 3,
          icon: 'el-icon-view',
          size: 'mini',
        }
      }
    }
  },
  mixins: [d2CrudPlus.crud],
  methods: {
    doLoad(){

    },
    getCrudOptions () {
      return crudOptions
    },

    handleRowAdd (row, done) {
      done()
    },

    reComputeCrudHeight () {

    },

    handleDialogCancel(done){
      done()
    },

    handleRowEdit ({ index, row }, done) {
      done()
    },

    handleRowRemove ({ index, row }, done) {
      done()
    }
  },
  computed: {
    formOptions () {
      return {
        ...this.crud.formOptions,
        updateTableDataAfterEdit: true
      }
    }
  }
}
</script>
